<meta charset="UTF-8">
<div id="batchmgr" class="full" style="padding: 10px;">
    <div class="demo-spin-container" v-if="loading">
        <Spin size="large" fix></Spin>
    </div>
    <div class="demo-spin-container" v-if="batchSendCmdLoading">
        <Spin fix>
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>{{$t("bgMgr.sending")}}:{{idx}}/{{tableData.length}}</div>
        </Spin>
    </div>
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.batchMgr")}}</h3>
        <Row>
            <i-col span="6" style="padding: 10px;">
                {{$t("bgMgr.allAevcieList")}}
            </i-col>
            <i-col span="13" style="padding: 10px;">
                {{$t("bgMgr.selectedDeviceList")}} {{tableData.length}}
                <i-button type="error" size="small" @click="tableData=[]" style="float: right;">{{$t("insure.deselectAll")}}</i-button>
            </i-col>
            <i-col span="5" style="padding: 10px;">
                {{$t("bgMgr.transferGroupList")}}
            </i-col>
        </Row>
        <Row>
            <i-col span="6" style="padding: 10px;">
                <div class="icon_example">
                    <span class="user_icon"></span><span>{{$t("bgMgr.user")}}</span>
                    <span class="group_icon"></span><span>{{$t("bgMgr.group")}}</span>
                    <span class="device_icon"></span><span>{{$t("bgMgr.ordinaryDev")}}</span>
                    <span class="video_icon"></span><span>{{$t("bgMgr.videoDev")}}</span>
                </div>
                <div style="height: 35px;">
                    <i-input v-model.trim="searchDeviceVal" icon="ios-close-circle-outline" @on-click="cleanValue" style="width: 100%;" icon="search"></i-input>
                </div>
                <div :style="treeStyle">
                    <ul id="ztree" class="ztree"></ul>
                </div>
            </i-col>
            <i-col span="13" style="padding: 10px;">
                <i-table border ref="table" :columns="columns" :data="tableData" :height="taleHeight"></i-table>
            </i-col>
            <i-col span="5" style="padding: 10px;">
                <div style="height: 35px;">
                    <i-input v-model.trim="searchGroupVal" style="width: 100%;" icon="search"></i-input>
                </div>
                <div :style="streeStyle">
                    <ul id="gztree" class="ztree"></ul>
                </div>
            </i-col>
        </Row>
        <Row>
            <i-col span="24" style="border: 1px solid #DCDEE2;padding: 5px;">
                <div style="display: flex;justify-content: center;">
                    <i-button @click="alarmModel=true" style="margin:0 5px;">{{$t("alarm.setAlarmType")}}</i-button>
                    <i-button @click="handleBatchTransfer" style="margin:0 5px;">{{$t("bgMgr.batchTransfer")}}</i-button>
                    <i-button @click="importModal=true" style="margin:0 5px;">{{$t("bgMgr.exportDevice")}}</i-button>
                    <i-button @click="showBatchModal(1)" style="margin:0 5px;">{{$t("bgMgr.batchEditIcon")}}</i-button>

                    <i-button @click="showBatchModal(2)" style="margin:0 5px;">{{$t("bgMgr.batchSettingVideoParameters")}}</i-button>
                    <!-- <i-button @click="showBatchModal(2)" style="margin:0 5px;">{{$t("bgMgr.batchEditDueDate")}}</i-button> -->
                    <i-button @click="showBatchModal(3)" style="margin:0 5px;">{{$t("bgMgr.batchResetPwd")}}</i-button>
                    <i-button @click="showBatchModal(4)" v-if="userName == 'admin'" style="margin:0 5px;">{{$t("bgMgr.batchEditDevType")}}</i-button>
                    <i-button @click="showBatchModal(5)" style="margin:0 5px;">{{$t("bgMgr.batchIssueCmd")}}</i-button>
                    <i-button v-if="userType<2" @click="showBatchModal(7)" style="margin:0 5px;">{{$t('bgMgr.batchEditDevMileageRatio')}}</i-button>
                    <i-button @click="showBatchModal(6)" style="margin:0 5px;">{{$t("bgMgr.setMileage")}}</i-button>
                    <!-- <Poptip v-if="userType<2" trigger="click" :title="$t('bgMgr.setMileage')">
                        <i-button style="margin:0 5px;"> {{$t("bgMgr.setMileage")}} </i-button>
                        <div slot="content" style="width:200px;padding:5px 0;">
                            <Row>
                                <i-Col span="22">
                                    <input-number v-model.number="mileage" :min="0" style="width: 100%;"></input-number>
                                </i-Col>
                                <i-Col span="2" style="line-height: 32px;">
                                    km
                                </i-Col>
                            </Row>
                            <Row style="margin-top: 10px;">
                                <i-Col span="24">
                                    <i-button @click="setMileage" type="primary" style="width: 100%;">{{$t('monitor.confirm')}}</i-button>
                                </i-Col>
                            </Row>
                        </div>
                    </Poptip> -->
                    <Poptip v-if="userType<2" trigger="click" confirm title="确定清除记录吗?" @on-ok="clearRecord">
                        <i-button style="margin:0 5px;"> {{$t("bgMgr.clearRecord")}} </i-button>
                    </Poptip>
                </div>
            </i-col>
        </Row>

        <Modal v-model="alarmModel" width="600">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>{{$t('alarm.filterAlarmTitle')}}</span>
            </p>
            <div>
                <div>
                    <i-input v-model.trim="searchValue" icon="ios-close-circle-outline" style="width:100%;" :placeholder='$t("alarm.searchValuePlaceholder")' @on-click="searchValue=''"></i-input>
                </div>
                <div style="overflow:hidden;margin-top:12px;" @click="checkingSelectState">
                    <div style="width:33.33%;float:left;padding:2px 0;" v-for="(item,index) in alarmTypeList" :key="index" v-show="item.show">
                        <Checkbox v-model="checkboxObj[item.index]">{{ isZh ? item.alarmname : item.alarmnameen}}</Checkbox>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Row>
                    <i-col span="21">
                        <i-button type="primary" @click="setForceAlarmClick" style="width: 100%">{{$t("monitor.confirm")}}</i-button>
                    </i-col>
                    <i-col span="3" style="text-align: center;line-height: 32px;" @click.native="onCheckAll">
                        <Checkbox :value="checkAll">{{isZh ? '全选' :'All'}}</Checkbox>
                    </i-col>
                </Row>
            </div>
        </Modal>

        <Modal v-model="importModal" width="700" :title="$t('device.import')">
            <Row>
                <i-col span="12" style="padding: 10px;">
                    <i-input v-model.trim="deviceid" type="textarea" :placeholder="$t('device.copyBatchNumber')" :autosize="{minRows: 15,maxRows: 15}"></i-input>
                </i-col>
                <i-col span="12" style="padding: 10px;" class="my-error-tips">
                    <i-input v-model.trim="errorTips" type="textarea" disabled :autosize="{minRows: 15,maxRows: 15}"></i-input>
                </i-col>
            </Row>
            <div slot="footer" style="height:40px;">
                <Row>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t('device.idLength')}}: &nbsp;</i-col>
                    <i-col span="5">
                        <input-number v-model.number="idLength" :max="15" :min="8" :editable="false" style="width: 100%;"></input-number>
                    </i-col>
                    <i-col span="8" offset="4">
                        <i-button style="width: 100%" @click="handleBatchImport">{{$t('device.import')}}</i-button>
                    </i-col>
                </Row>
            </div>
        </Modal>

        <Modal v-model="sendCmdModal" width="800" :title="$t('bgMgr.issueCmd')">
            <div style="height: 400px;">
                <Row>
                    <i-col span="8" style="height: 400px;overflow-y: auto;">
                        <div class="ivu-menu-directive">
                            <ul class="ivu-menu ivu-menu-light ivu-menu-vertical">
                                <template v-for="(item,index) in currentDevDirectiveList">
                                    <li class="ivu-menu-item" 
                                        :key="item.name"
                                        :class="{'ivu-menu-item-active':currentCmdCode == item.cmdcode,'ivu-menu-item-selected':currentCmdCode == item.cmdcode}" 
                                        @click="handleClickDevType(item)">
                                            <span>{{ item.cmdname}}</span>
                                    </li> 
                                </template>
                            </ul>
                        </div>
                    </i-col>
                    <i-col offset="1" span="15" style="height: 400px;overflow-y: auto;">
                        <div style="text-align:center">
                            <h3 style="color:#f60;text-align:center">
                                <Icon type="ios-create-outline"></Icon>
                                <span>{{ selectedCmdInfo.cmdName }}</span>
                            </h3>
                            <Row style="margin: 10px 0">
                                <i-col span="24" style="height: 100%;text-align:center;line-height:32px;font-size:14px;">{{selectedCmdInfo.cmddescr}}</i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-if="selectedCmdInfo.type === 'list'">
                                <i-col :offset="5" span="16">
                                    <i-select v-model="selectedTypeVal">
                                        <i-option v-for="item in selectedCmdInfo.params" :value="item.type" :key="item.type">{{ item.value }}</i-option>
                                    </i-select>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'text'">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{item.desc}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <i-input v-model.trim="cmdParams[item.type]"></i-input>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'timeperiod'">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{item.desc}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <Time-Picker format="HH:mm" type="timerange" placeholder="选择时间段" v-model="cmdParams[item.type]"></Time-Picker>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'remind'">
                                <i-col span="3" style="height: 100%;text-align:right;line-height:32px;">{{item.desc}} : &nbsp;</i-col>
                                <i-col span="18">
                                    <Row>
                                        <i-col span="16">
                                            <Time-Picker format="HH:mm" placeholder="选择时间" v-model="cmdParams[item.type].time"></Time-Picker>
                                        </i-col>
                                        <i-col span="8" style="height: 100%;line-height:32px;">
                                            <i-switch v-model="cmdParams[item.type].switch" />
                                        </i-col>
                                    </Row>
                                    <Row style="margin: 10px 0">
                                        <i-col span="16">
                                            <Radio-Group v-model="cmdParams[item.type].type">
                                                <Radio label="1"> <span>一次</span></Radio>
                                                <Radio label="2"> <span>每天</span></Radio>
                                                <Radio label="3"><span>每周</span></Radio>
                                            </Radio-Group>
                                        </i-col>
                                    </Row>
                                    <Row style="margin: 10px 0" v-if="cmdParams[item.type].type === '3' ">
                                        <i-col span="24">
                                            <CheckboxGroup v-model="cmdParams[item.type].weekselected">
                                                <Checkbox label="一"><span>一</span></Checkbox>
                                                <Checkbox label="二"><span>二</span></Checkbox>
                                                <Checkbox label="三"><span>三</span></Checkbox>
                                                <Checkbox label="四"><span>四</span></Checkbox>
                                                <Checkbox label="五"><span>五</span></Checkbox>
                                                <Checkbox label="六"><span>六</span></Checkbox>
                                                <Checkbox label="日"><span>日</span></Checkbox>
                                            </CheckboxGroup>
                                        </i-col>
                                    </Row>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'time'">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{item.desc}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <Time-Picker format="HH:mm" type="time" placeholder="选择时间" v-model="cmdParams[item.type]"></Time-Picker>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'weektime'">
                                <i-col span="3" style="height: 100%;text-align:right;line-height:32px;">
                                    <Row style="margin: 10px 0">
                                        <i-col span="24">
                                            {{item.desc}} : &nbsp;
                                        </i-col>
                                    </Row>
                                </i-col>
                                <i-col span="18">
                                    <Row style="margin: 10px 0">
                                        <i-col span="24">
                                            <Time-Picker format="HH:mm" type="time" placeholder="选择时间" v-model="cmdParams[item.type].time"></Time-Picker>
                                        </i-col>
                                    </Row>
                                    <Row style="margin: 10px 0">
                                        <i-col span="24">
                                            <CheckboxGroup v-model="cmdParams[item.type].weekselected">
                                                <Checkbox label="一"><span>一</span></Checkbox>
                                                <Checkbox label="二"><span>二</span></Checkbox>
                                                <Checkbox label="三"><span>三</span></Checkbox>
                                                <Checkbox label="四"><span>四</span></Checkbox>
                                                <Checkbox label="五"><span>五</span></Checkbox>
                                                <Checkbox label="六"><span>六</span></Checkbox>
                                                <Checkbox label="日"><span>日</span></Checkbox>
                                            </CheckboxGroup>
                                        </i-col>
                                    </Row>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-for="item in selectedCmdInfo.params" :key="item.desc" v-if="selectedCmdInfo.type === 'weekperiod'">
                                <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">
                                    <Row style="margin: 10px 0">
                                        <i-col span="24">
                                            {{item.desc}} : &nbsp;
                                        </i-col>
                                    </Row>
                                </i-col>
                                <i-col span="20">
                                    <Row style="margin: 10px 0" v-if="item.type=='week'">
                                        <i-col span="24">
                                            <Checkbox-Group v-model="cmdParams[item.type]">
                                                <Checkbox label="一"><span>一</span></Checkbox>
                                                <Checkbox label="二"><span>二</span></Checkbox>
                                                <Checkbox label="三"><span>三</span></Checkbox>
                                                <Checkbox label="四"><span>四</span></Checkbox>
                                                <Checkbox label="五"><span>五</span></Checkbox>
                                                <Checkbox label="六"><span>六</span></Checkbox>
                                                <Checkbox label="日"><span>日</span></Checkbox>
                                            </Checkbox-Group>
                                        </i-col>
                                    </Row>
                                    <Row style="margin: 10px 0" v-else>
                                        <i-col span="20">
                                            {{item.title}} &nbsp;
                                            <Time-Picker format="HH:mm" v-model="cmdParams[item.type]" type="timerange" placeholder="选择时间段"></Time-Picker>
                                        </i-col>
                                    </Row>
                                </i-col>
                            </Row>

                            <Row style="margin: 10px 0" v-show="selectedCmdInfo.cmdpwd">
                                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("bgMgr.pwd")}} : &nbsp;</i-col>
                                <i-col span="16">
                                    <i-input v-model.trim="cmdPwd" style="width:100%;"></i-input>
                                </i-col>
                            </Row>

                        </div>
                    </i-col>
                </Row>
            </div>
            <div slot="footer">
                <Row>
                    <i-col offset="9" span="15" style="text-align: center;">
                        <i-button @click="batchSendCmd" style="width:300px;" type="primary">{{$t("videoSettings.send")}}</i-button>
                    </i-col>
                </Row>
            </div>
        </Modal>
        <Modal v-model="batchModal" width="400" :title="$t('bgMgr.batchModification')">
            <div v-if="showBatchModalType == 1">
                <Row>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">{{$t("device.icon")}} : &nbsp;</i-col>
                    <i-col span="16">
                        <div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type search-wrapper" style="position: relative;" v-click-outside.capture="clickOutside">
                            <div class="ivu-input ivu-input-default" style="padding: 0px;line-height: 28px;" @click="clickIconWrapper">
                                <img :src="'./images/carstate/'+icon+'_green_0.png'" style="width: 28px;height: 28px;">
                            </div>
                            <transition name="fade">
                                <ul class="search-item-wrapper" v-show="isShowIcon" style="cursor: pointer;">
                                    <li @click="selectedIcon(0)" :class="{'ivu-select-item-focus':icon == '0'}">
                                        <div>
                                            <img :src="'./images/carstate/0_green_0.png'" style="width: 28px;height: 28px;">
                                        </div>
                                    </li>
                                    <li @click="selectedIcon(1)" :class="{'ivu-select-item-focus':icon == '1'}">
                                        <div>
                                            <img :src="'./images/carstate/1_green_0.png'" style="width: 28px;height: 28px;">
                                        </div>
                                    </li>
                                    <li @click="selectedIcon(2)" :class="{'ivu-select-item-focus':icon == '2'}">
                                        <div>
                                            <img :src="'./images/carstate/2_green_0.png'" style="width: 28px;height: 28px;">
                                        </div>
                                    </li>
                                    <li @click="selectedIcon(3)" :class="{'ivu-select-item-focus':icon == '3'}">
                                        <div>
                                            <img :src="'./images/carstate/3_green_0.png'" style="width: 28px;height: 28px;">
                                        </div>
                                    </li>
                                    <li @click="selectedIcon(4)" :class="{'ivu-select-item-focus':icon == '4'}">
                                        <div>
                                            <img :src="'./images/carstate/4_green_0.png'" style="width: 28px;height: 28px;">
                                        </div>
                                    </li>
                                </ul>
                            </transition>
                        </div>
                    </i-col>
                </Row>
            </div>
            <Row v-if="showBatchModalType == 2">
                <i-col span="4" offset="2" style="line-height: 32px;">
                    {{$t("reportForm.selectVehicle")}}:
                </i-col>
                <i-col span="14">
                    <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                        <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-click="cleanSelectedDev" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus" :placeholder="placeholder" @on-click="focus"></i-input>
                        <transition name="fade">
                            <ul class="search-item-wrapper" v-show="isShowMatchDev">
                                <li class="demo-auto-complete-item" v-for="item in filterData">
                                    <div class="demo-auto-complete-group" v-show="item.devices.length" @click="sosoSelectGroup(item.groupname)">
                                        <span>{{ item.groupname }}</span>
                                    </div>
                                    <div v-for="option in item.devices" :value="option.groupname" :key="option.groupname" class="ivu-select-item">
                                        <span :style="{color:option.isOnline ? '#33DAD0':'#B1BBC2'}" @click="sosoSelect(option)" class="demo-auto-complete-title">{{ option.allDeviceIdTitle }}</span>
                                    </div>
                                </li>
                            </ul>
                        </transition>
                    </div>
                </i-col>
            </Row>
            <Row v-if="showBatchModalType == 2" style="padding-top: 15px;">
                <i-col span="20" offset="2">
                    <Alert type="warning">
                        {{$t("message.warningTips")}}
                    </Alert>
                </i-col>
            </Row>

            <Row v-if="showBatchModalType == 3">
                <i-col span="4" offset="4" style="line-height: 32px;">
                    {{$t('bgMgr.passModel')}}:
                </i-col>
                <i-col span="12">
                    <i-select v-model="resetpasswordtype">
                        <i-option value="1">{{$t('bgMgr.deviceIDlastFour')}}</i-option>
                        <i-option value="2">{{$t('bgMgr.fixedPassword')}}</i-option>
                    </i-select>
                </i-col>
            </Row>
            <Row v-if="showBatchModalType == 3 && resetpasswordtype == '2'" style="margin-top: 10px;">
                <i-col span="4" offset="4" style="line-height: 32px;">
                    {{$t('header.newPwd')}}:
                </i-col>
                <i-col span="12">
                    <i-input v-model.trim="newPassword"></i-input>
                </i-col>
            </Row>
            <Row v-if="showBatchModalType == 4">
                <i-col span="4" offset="2" style="line-height: 32px;">
                    {{$t('user.devType')}}:
                </i-col>
                <i-col span="16">
                    <i-select v-model="deviceType" style="width: 100%;">
                        <i-option v-for="item in deviceTypeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                    </i-select>
                </i-col>
            </Row>
            <div v-if="showBatchModalType == 5">
                <div style="text-align: center;padding:0 0 10px 0;font-weight: 600;font-size: 18px;">{{$t('bgMgr.issueCmd')}}</div>
                <Row>
                    <i-col span="4" style="line-height: 32px;">
                        {{$t('bgMgr.cmdContent')}}:
                    </i-col>
                    <i-col span="20">
                        <i-input v-model.trim="cmdContent" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
                <Row style="margin-top: 10px;">
                    <i-col span="4" style="line-height: 32px;">
                        {{$t('bgMgr.pwd')}}:
                    </i-col>
                    <i-col span="20">
                        <i-input v-model.trim="cmdPassword" style="width: 100%;"></i-input>
                    </i-col>
                </Row>
            </div>
            <div v-if="showBatchModalType == 6">
                <Row>
                    <i-col span="4" offset="4" style="line-height: 32px;">
                        {{$t('bgMgr.setMileage')}}:
                    </i-col>
                    <i-Col span="12">
                        <input-number v-model.number="mileage" :min="0" style="width: 100%;"></input-number>
                    </i-Col>
                    <i-Col span="1" style="line-height: 32px;">
                        km
                    </i-Col>
                </Row>
            </div>
            <div v-if="showBatchModalType == 7">
                <Row>
                    <i-col span="4" offset="4" style="line-height: 32px;">
                        {{$t('bgMgr.mileageRatio')}}:
                    </i-col>
                    <i-Col span="12">
                        <i-input v-model.number="mileageRatio" style="width: 100%;"></i-input>
                    </i-Col>
                    <i-Col span="1" style="line-height: 32px;">
                        %
                    </i-Col>
                </Row>
            </div>
            <div slot="footer" style="height:40px;">
                <Row style="margin: 5px 0">
                    <i-col span="24" style="text-align: center;">
                        <i-button @click="handleBatchEdit" style="width:300px;">{{$t("bgMgr.submit")}}</i-button>
                    </i-col>
                </Row>
            </div>
        </Modal>
    </div>
</div>
<script>
    vueInstanse = new Vue({
        el: "#batchmgr",
        i18n: utils.getI18n(),
        mixins: [reportMixin],
        data: {
            groupslist: vRoot.$children[1].groups,
            isZh: isZh,
            checkAll: false,
            loading: false,
            alarmModel: false,
            userType: localStorage.getItem('userType'),
            batchSendCmdLoading: false,
            idx: 0,
            showBatchModalType: 1, // 1批量地址  2
            importModal: false,
            batchModal: false,
            sendCmdModal: false,
            idLength: 11,
            isOk: false,
            mileage: 0,
            forwardurl: "",
            newPassword: '',
            forwardtype: '0',
            cmdContent: '',
            cmdPassword: '',
            resetpasswordtype: '1',
            deviceType: '',
            deviceTypeList: [],
            errorTips: '',
            deviceid: '',
            searchDeviceVal: '',
            searchGroupVal: '',
            searchDeviceList: [],
            treeGroupList: [],
            tableData: [],
            mileageRatio: 100,
            columns: [{
                type: 'index',
                width: 60,
            }, {
                title: vRoot.$t('alarm.devName'),
                key: 'devicename'
            }, {
                title: vRoot.$t('alarm.devNum'),
                key: 'deviceid',
            }, {
                title: vRoot.$t("reportForm.ascriptionUser"),
                key: 'username'
            }, {
                title: vRoot.$t("reportForm.ascriptionGroup"),
                key: 'groupname'
            }, {
                title: vRoot.$t('alarm.action'),
                width: 107,
                render: function(h, params) {
                    return h('Button', {
                        props: {
                            type: 'error',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: function() {
                                vueInstanse.tableData.splice(params.index, 1);
                                var checkedNodes = vueInstanse.zTreeObj.getCheckedNodes(); //得到选中的节点
                                for (var k = 0; k < checkedNodes.length; k++) {
                                    var deviceid = checkedNodes[k].deviceid;
                                    if (deviceid == params.row.deviceid) {
                                        vueInstanse.zTreeObj.checkNode(checkedNodes[k]); //取消这个节点的勾选状态
                                    }
                                }

                            }
                        }
                    }, vRoot.$t('insure.deselect'))
                }
            }, {
                title: vRoot.$t('bgMgr.result'),
                width: 90,
                render: function(h, params) {
                    var result = '',
                        color = '',
                        resultType = params.row.resultType;
                    switch (resultType) {
                        case 0:
                            color = "#2D8CF0";
                            result = vRoot.$t('device.actionSucc');
                            break;
                        case 1:
                            color = "#E4393C";
                            result = vRoot.$t('device.actionFail');
                            break;
                        case 2:
                            color = "#000";
                            result = vRoot.$t('device.notOperated');
                            break;
                        case 3:
                            color = "red";
                            result = vRoot.$t('device.noDevice');
                            break;
                        case 4:
                            color = "red";
                            result = vRoot.$t('device.passwordError');
                            break;
                        case 5:
                            color = "red";
                            result = vRoot.$t('device.abnormalInstructionIssued');
                            break;
                        case 6:
                            color = "red";
                            result = vRoot.$t('monitor.sendCmdNoCache');
                            break;
                        case 7:
                            color = "red";
                            result = vRoot.$t('monitor.sendCmdAlreadyCache');
                            break;
                        case 8:
                            color = "red";
                            result = vRoot.$t('monitor.changePwdSendCmd');
                            break;
                    }
                    return h('span', {
                        style: {
                            color: color
                        }
                    }, result);
                }
            }],
            selectedGroupId: null,
            selectedUserName: null,
            taleHeight: 100,
            alarmTypeList: deepClone(alarmTypeList),
            checkboxObj: {},
            searchValue: '',
            currentDevDirectiveList: [],
            currentCmdCode: '',
            selectedCmdInfo: {},
            cmdParams: {},
            cmdPwd: '',
            isShowIcon: false,
            icon: '0',

        },
        methods: {
            clickOutside: function() {
                this.isShowIcon = false;
            },
            clickIconWrapper: function() {
                this.isShowIcon = true;
            },
            selectedIcon: function(icon) {
                this.icon = String(icon);
                this.isShowIcon = false;
            },
            handleClickDevType: function(cmd) {
                this.currentCmdCode = cmd.cmdcode;
                this.currentCmd = cmd;
                this.renderingCmdParamOrAssignment(cmd);
            },
            renderingCmdParamOrAssignment: function(cmdInfo) {
                var me = this;
                var cmdcode = cmdInfo.cmdcode;
                var cmdVal = this.cmdSettings[cmdcode];;

                this.cmdParams = {};
                this.selectedCmdInfo = {};
                if (isZh) {
                    this.selectedCmdInfo.cmdName = cmdInfo.cmdname;
                    this.selectedCmdInfo.cmddescr = cmdInfo.cmddescr;
                } else {
                    this.selectedCmdInfo.cmdName = cmdInfo.cmdnameen;
                    this.selectedCmdInfo.cmddescr = cmdInfo.cmddescren;
                }
                this.selectedCmdInfo.cmdcode = cmdInfo.cmdcode;
                this.selectedCmdInfo.cmdpwd = cmdInfo.cmdpwd;
                this.selectedCmdInfo.type = cmdInfo.cmdtype;

                if (cmdInfo.params) {

                    var paramsXMLObj = utils.parseXML(isZh ? cmdInfo.params : cmdInfo.paramsen);
                    // this.selectedCmdInfo.type = paramsXMLObj.type;
                    this.selectedCmdInfo.params = paramsXMLObj.paramsListObj;

                    this.selectedCmdInfo.params.forEach(function(param, index) {
                        if (cmdVal && cmdVal.length && cmdVal[0]) {
                            if (cmdInfo.cmdtype === 'timeperiod') {
                                me.cmdParams[param.type] = cmdVal[index].split("-");
                            } else if (cmdInfo.cmdtype === 'remind') {
                                me.cmdParams[param.type] = utils.parserToRemindJson(cmdVal[index]);
                            } else if (cmdInfo.cmdtype === 'weektime') {
                                me.cmdParams[param.type] = utils.parserToWeekTimeJson(cmdVal[index]);
                            } else if (cmdInfo.cmdtype === 'weekperiod') {
                                me.cmdParams[param.type] = utils.parserToWeekPeriodJson(param, cmdVal[index]);
                            } else {
                                me.cmdParams[param.type] = cmdVal[index];
                            }
                        } else {
                            if (cmdInfo.cmdtype === 'timeperiod') {
                                var timerArr = param.value ? param.value.split("-") : ["00:00", "00:00"];
                                me.cmdParams[param.type] = timerArr;
                            } else if (cmdInfo.cmdtype === 'remind') {
                                var remindJson = utils.parserToRemindJson(param.value);
                                me.cmdParams[param.type] = remindJson;
                            } else if (cmdInfo.cmdtype === 'weektime') {
                                me.cmdParams[param.type] = utils.parserToWeekTimeJson(param.value);
                            } else if (cmdInfo.cmdtype === 'weekperiod') {
                                me.cmdParams[param.type] = utils.parserToWeekPeriodJson(param);
                            } else {
                                me.cmdParams[param.type] = param.value;
                            }

                        }
                    });


                    (cmdInfo.cmdtype !== 'text' || cmdInfo.cmdtype === 'timeperiod') ? this.selectedTypeVal = (cmdVal ? cmdVal[0] : ""): '';
                };
            },
            querySingleAllCmdDefaultValue: function(deviceid) {
                var url = myUrls.queryDeviceSettings(),
                    me = this;
                utils.sendAjax(url, {
                    deviceid: deviceid
                }, function(resp) {
                    if (resp.status === 0) {
                        me.cmdSettings = resp.settings;
                    }
                })
            },
            checkingSelectState: function() {
                var me = this;
                setTimeout(function() {
                    var isCheckAll = true;
                    for (var key in me.checkboxObj) {
                        if (!me.checkboxObj[key]) {
                            isCheckAll = false;
                            break;
                        }
                    }
                    // console.log('isCheckAll', isCheckAll);
                    me.checkAll = isCheckAll;
                }, 300)
            },
            onCheckAll: function() {
                var me = this;
                this.checkAll = !this.checkAll;
                for (var key in me.checkboxObj) {
                    // console.log('checkAll', this.checkAll);
                    me.checkboxObj[key] = this.checkAll;
                }
            },
            showBatchModal: function(type) {
                if (type == 5) {
                    if (this.tableData.length == 0) {
                        this.$Message.error(vRoot.$t('reportForm.selectDevTip'));
                        return;
                    }
                    this.sendCmdModal = true;
                } else {
                    this.batchModal = true;
                    this.forwardurl = '';
                    this.newPassword = '';
                }
                this.showBatchModalType = type;

            },
            clearRecord: function() {
                if (this.tableData.length == 0) {
                    this.$Message.error(vRoot.$t('reportForm.selectDevTip'));
                    return;
                };
                var me = this;
                var url = myUrls.cleanHistoryData();
                this.tableData.forEach(function(item) {
                    (function(item) {
                        var deviceid = item.deviceid;
                        var data = {
                            deviceid: deviceid
                        };
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status == 0) {
                                item.resultType = 0;
                            } else {
                                item.resultType = 1;
                            }
                        });
                    })(item);
                });
            },
            setMileage: function() {
                if (this.tableData.length == 0) {
                    this.$Message.error(vRoot.$t('reportForm.selectDevTip'));
                    return;
                };
                var me = this,
                    url = myUrls.fixTotalDistance(),
                    mileage = Number(this.mileage);
                this.tableData.forEach(function(item) {
                    (function(item) {
                        var deviceid = item.deviceid;
                        var data = {
                            deviceid: deviceid,
                            mileage: mileage
                        };
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status == 0) {
                                item.resultType = 0;
                            } else {
                                item.resultType = 1;
                            }
                        });
                    })(item);
                });
            },
            getCmdParamsVlaue: function() {
                var params = [];

                switch (this.selectedCmdInfo.type) {
                    case 'text':
                        params = Object.values(this.cmdParams);
                        break;
                    case 'time':
                        params = Object.values(this.cmdParams);
                        break;
                    case 'timeperiod':
                        for (var key in this.cmdParams) {
                            params.push(this.cmdParams[key].join("-"))
                        };
                        break;
                    case 'remind':
                        params = utils.encodeRemindParams(this.cmdParams);
                        break;
                    case 'weektime':
                        params = utils.encodeWeekTimeParams(this.cmdParams);
                        break;
                    case 'weekperiod':
                        params = utils.encodeWeekPeriodParams(this.cmdParams);
                        break;
                    default:
                        params = [this.selectedTypeVal]
                };
                return params;
            },
            batchSendCmd: function() {
                if (this.tableData.length == 0) {
                    this.$Message.error(vRoot.$t('reportForm.selectDevTip'));
                    return;
                }
                var me = this;
                var params = me.getCmdParamsVlaue();
                var data = {
                    deviceids: [],
                    action: 'sendcommand',
                    devicetype: this.devicetype,
                    cmdcode: this.currentCmdCode,
                    params: params,
                }
                if (this.selectedCmdInfo.cmdpwd && this.selectedCmdInfo.cmdpwd != "") {
                    if (this.cmdPwd) {
                        data.cmdpwd = this.cmdPwd;
                    } else {
                        me.$Message.error(me.$t("monitor.pwdErr"));
                        return;
                    }
                };
                this.tableData.forEach(function(item) {
                    data.deviceids.push(item.deviceid);
                });
                var url = myUrls.batchOperate();
                utils.sendAjax(url, data, function(respData) {
                    me.cmdSettings[data.cmdcode] = params;
                    if (respData.status === 0) {
                        if (respData.total == respData.success) {
                            me.$Message.success(vRoot.$t('device.actionSucc'));
                        } else {
                            me.$Message.error(vRoot.$t('message.changeFail') + ' : ' + respData.fail);
                        }
                        me.updatedActionState(respData.errorrecords);
                        me.batchModal = false;
                    } else {
                        me.$Message.error(respData.cause);
                    }
                });

            },
            handleBatchEdit: function() {
                if (this.tableData.length == 0) {
                    this.$Message.error(vRoot.$t('reportForm.selectDevTip'));
                    return
                }
                var data = {
                        deviceids: []
                    },
                    me = this;

                if (this.showBatchModalType == 1) {
                    data.action = 'seticon';
                    data.icon = Number(this.icon);
                    // data.forwardtype = Number(this.forwardtype);
                    // data.forwardurl = this.forwardurl;
                } else if (this.showBatchModalType == 2) {
                    // data.action = 'modifyexpiretime';
                    // data.expiretime = new Date(this.expirationDate).getTime();
                    if (this.queryDeviceId == "") {
                        this.$Message.error(this.$t("reportForm.selectDevTip"));
                        return;
                    }
                    data.action = 'videosetting';
                    data.deviceid = this.queryDeviceId;
                } else if (this.showBatchModalType == 3) {
                    data.action = 'resetpassword';
                    if (this.resetpasswordtype == '2') {
                        if (this.newPassword.length >= 4) {
                            data.resetpasswordtype = 2;
                            data.passwordnotmd5 = this.newPassword;
                        } else {
                            this.$Message.error(vRoot.$t('device.pwdLengthTips'));
                            return;
                        }
                    } else {
                        data.resetpasswordtype = 1;
                    }
                } else if (this.showBatchModalType == 4) {
                    data.action = 'changedevicetype';
                    data.devicetype = this.deviceType;
                } else if (this.showBatchModalType == 5) {
                    this.batchSendCmdLoading = true;
                    var url = myUrls.sendCmd();
                    this.idx = 0;
                    var tableData = deepClone(me.tableData);
                    this.tableData.forEach(function(item) {
                        var deviceid = item.deviceid
                        var data = {
                            "devicetype": vRoot.$children[1].deviceInfos[deviceid].devicetype,
                            "cmdcode": "TYPE_SERVER_TRANS_DATA",
                            "deviceid": item.deviceid,
                            "params": [me.cmdContent],
                            "state": -1,
                            "cmdpwd": me.cmdPassword
                        };
                        utils.sendAjax(url, data, function(resp) {
                            me.idx++;
                            tableData.forEach(function(item) {
                                if (item.deviceid == deviceid) {
                                    if (resp.status === 0) {
                                        item.resultType = 0;
                                    } else if (resp.status === 1) {
                                        item.resultType = 4;
                                    } else if (resp.status === -1) {
                                        item.resultType = 5;
                                    } else if (resp.status === 2) {
                                        item.resultType = 6;
                                    } else if (resp.status === 3) {
                                        item.resultType = 7;
                                    } else if (resp.status === 4) {
                                        item.resultType = 8;
                                    }
                                }
                            });
                            if (me.idx >= tableData.length - 1) {
                                me.tableData = tableData;
                                me.batchSendCmdLoading = false;
                            }
                        }, function() {
                            me.idx++;
                            tableData.forEach(function(item) {
                                if (item.deviceid == deviceid) {
                                    if (resp.status === 0) {
                                        item.resultType = 1;
                                    };
                                }
                            });
                            if (me.idx >= tableData.length - 1) {
                                me.tableData = tableData;
                                me.batchSendCmdLoading = false;
                            }
                        });
                    });
                    me.batchModal = false;
                    return;
                } else if (this.showBatchModalType == 6) {
                    data.action = 'fixtotaldistance';
                    data.mileage = this.mileage;
                } else if (this.showBatchModalType == 7) {
                    data.action = 'setdistanceratio';
                    data.distanceratio = this.mileageRatio;
                }

                var lock = true;
                this.tableData.forEach(function(item) {
                    if (item.resultType === 3) {
                        lock = false;
                    }
                    data.deviceids.push(item.deviceid);
                });
                if (!lock) {
                    me.$Message.error(vRoot.$t('device.exportErrorTips'));
                    return;
                }
                me.loading = true;
                var url = myUrls.batchOperate();
                utils.sendAjax(url, data, function(respData) {
                    me.loading = false;
                    if (respData.status === 0) {
                        if (respData.total == respData.success) {
                            me.$Message.success(vRoot.$t('device.actionSucc'));
                        } else {
                            me.$Message.error(vRoot.$t('message.changeFail') + ' : ' + respData.fail);
                        }
                        me.updatedActionState(respData.errorrecords);
                        me.batchModal = false;
                    } else {
                        me.$Message.error(respData.cause);
                    }
                }, function() {
                    me.loading = false;
                });
            },
            handleBatchTransfer: function() {
                if (this.tableData.length == 0) {
                    this.$Message.error(vRoot.$t('reportForm.selectDevTip'));
                    return;
                }

                if (this.selectedGroupId === null) {
                    this.$Message.error(vRoot.$t('device.selectedTransferGroup'));
                    return;
                }
                this.loading = true;
                var url = myUrls.batchOperate(),
                    me = this;
                var data = {
                    action: 'move',
                    deviceids: [],
                    targetgroupid: this.selectedGroupId,
                    targetusername: this.selectedUserName,
                }
                var lock = true;
                var devices = [];
                this.tableData.forEach(function(item) {
                    if (item.resultType === 3) {
                        lock = false;
                    }
                    data.deviceids.push(item.deviceid);
                    devices.push(item);
                });
                if (!lock) {
                    me.$Message.error(vRoot.$t('device.exportErrorTips'));
                    return;
                }
                utils.sendAjax(url, data, function(respData) {
                    me.loading = false;
                    if (respData.status === 0) {
                        rootuser = null;
                        isNeedRefresh = true;
                        if (respData.total == respData.success) {
                            me.$Message.success(vRoot.$t('device.actionSucc'));
                            me.tableData.forEach(function(item) {
                                item.resultType = 0;
                            });
                        } else {
                            me.updatedActionState(respData.errorrecords);
                            var successArr = [];
                            me.$Message.error(vRoot.$t('message.changeFail') + ' : ' + respData.fail);
                        }
                        me.updateRootuserData(devices, data);
                        me.queryDevicesTree();
                    } else {
                        me.$Message.error(respData.cause);
                    }
                }, function() {
                    me.loading = false;
                });
            },
            updateRootuserData: function(devices, data) {
                var groupid = data.targetgroupid;
                var creater = data.targetusername;
                devices.forEach(function(device) {
                    GlobalOrgan.getInstance().removeDevice(device.creater, device.groupid, device.deviceid);
                    device.creater = creater;
                    device.groupid = groupid;
                    GlobalOrgan.getInstance().addDevice(device);
                });
            },
            updatedActionState: function(errorrecords) {
                this.tableData.forEach(function(item) {
                    if (errorrecords.indexOf(item.deviceid) != -1) {
                        item.resultType = 1;
                    } else {
                        item.resultType = 0;
                    }
                })
            },
            handleBatchImport: function() {
                if (!this.isOk) {
                    this.$Message.error(isZh ? "请添加正确的imeis" : "Please add the correct IMEIs");
                    return;
                };
                var deviceids = this.deviceid.split('\n').filter(function(item) {
                    if (item) {
                        return item
                    }
                });
                var tableData = [];
                deviceids.forEach(function(deviceid) {
                    var device = utils.deviceInfos[deviceid];
                    if (device) {
                        device.resultType = 2;
                        tableData.push(device)
                    } else {
                        tableData.push({
                            resultType: 3,
                            deviceid: deviceid
                        });
                    }
                });
                this.tableData = this.tableData.concat(tableData);
                this.importModal = false;
            },
            onCheckChange: function(selectArr) {
                var me = this;
                var tableData = [];
                selectArr.forEach(function(item) {
                    var deviceid = item.deviceid;
                    if (deviceid && !me.isRepeatAddDevice(deviceid)) {
                        utils.deviceInfos[deviceid].resultType = 2;
                        tableData.push(utils.deviceInfos[deviceid]);
                    }
                })
                var newArr = this.tableData.concat(tableData);
                // var newArr = tableData;
                if (newArr.length > 500) {
                    newArr = newArr.slice(0, 500);
                }
                this.tableData = newArr;

            },
            isRepeatAddDevice: function(deviceid) {
                var relsut = false;
                for (var i = 0; i < this.tableData.length; i++) {
                    var item = this.tableData[i];
                    if (item.deviceid == deviceid) {
                        relsut = true;
                        break;
                    }
                }
                return relsut;
            },
            queryDevicesTree: function() {
                var me = this;
                this.loading = true;
                // GlobalOrgan.getInstance().clearData();
                GlobalOrgan.getInstance().getGlobalOrganData(function(rootuser) {
                    me.loading = false;
                    me.setTreeDataList(rootuser);
                })
            },
            setTreeDataList: function(rootuser) {


                this.treeDeviceList = [this.castUsersTreeToDevicesTree(rootuser, true, false)];

                var me = this;
                this.setting = {
                    check: {
                        enable: true,
                        chkStyle: "checkbox",
                        chkboxType: {
                            "Y": "ps",
                            "N": "ps"
                        }
                    },
                    callback: {
                        onCheck: function(id, ztree) {
                            var checkedNodes = me.zTreeObj.getCheckedNodes();
                            me.onCheckChange(checkedNodes);
                        }
                    },
                    // view: {
                    //     addDiyDom: function(treeId, treeNode) {
                    //         var spaceWidth = 15;
                    //         //获取每个li的结点下的a标签
                    //         if (treeNode.username) {
                    //             var aObj = $("#" + treeNode.tId + "_a");
                    //             var spaceStr = $("<span class='blkSpaSpan' style='width:15px;float:right'>11</span>");
                    //             aObj.append(spaceStr);
                    //             spaceStr.click(function() {
                    //                 alert(11);
                    //             })
                    //         }
                    //     }
                    // }
                };

                this.zTreeObj = $.fn.zTree.init($("#ztree"), this.setting, this.treeDeviceList);




                this.gsetting = {
                    check: {
                        enable: true,
                        chkStyle: "radio",
                        radioType: "all"
                    },
                    view: {
                        dblClickExpand: false
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    callback: {
                        onCheck: function() {
                            var nodes = me.gzTreeObj.getCheckedNodes();
                            if (nodes.length) {
                                var node = nodes[0];
                                var username = '';
                                var groupid = 0;
                                if (node.username) {
                                    username = node.username;
                                } else {
                                    var parentNode = node.getParentNode();
                                    username = parentNode.username;
                                    groupid = node.groupid;
                                }
                                me.selectedGroupId = groupid;
                                me.selectedUserName = username;
                            } else {
                                me.selectedGroupId = null;
                                me.selectedUserName = null;
                            }
                        },

                    }
                };

                this.treeGroupList = [this.castUsersTreeToDevicesTree(rootuser, false, true)];

                this.gzTreeObj = $.fn.zTree.init($("#gztree"), this.gsetting, this.treeGroupList);


            },
            filtered: function(textStr) {
                function uniq(array) {
                    var temp = [];
                    for (var i = 0; i < array.length; i++) {
                        if (temp.indexOf(array[i]) == -1) {
                            temp.push(array[i]);
                        }
                    }
                    return temp;
                }
                var newArr = [];
                textStr.split("\n").forEach(function(item) {
                    if (item) {
                        newArr.push(item);
                    }
                })
                return uniq(newArr);
            },
            getDeviceListGroups: function(groups, isNeedDevice, username, isNeedRadio) {
                var groupsList = [],
                    me = this;
                if (groups != null) {
                    for (var i = 0; i < groups.length; ++i) {
                        var group = groups[i];
                        var groupObj = {
                            groupid: group.groupid,
                            name: group.groupname,
                            icon: myUrls.viewhost + "zTreeStyle/img/diy/group.svg"
                        }
                        if (isNeedDevice) {
                            groupObj.render = utils.renderGroup;

                        } else {
                            groupObj.totalCount = group.devices.length;
                            groupObj.name = group.groupname + '(' + group.devices.length + ')';
                        }
                        if (isNeedDevice && group.devices) {
                            groupObj.totalCount = group.devices.length;
                            groupObj.children = [];
                            groupObj.name = group.groupname + '(' + group.devices.length + ')';
                            group.devices.forEach(function(device) {
                                groupObj.children.push({
                                    deviceid: device.deviceid,
                                    name: device.devicename,
                                    icon: utils.getzTreeDeviceIcon(device),
                                });
                                utils.deviceInfos[device.deviceid] = {
                                    deviceid: device.deviceid,
                                    devicename: device.devicename,
                                    username: username,
                                    groupid: group.groupid,
                                    groupname: group.groupname,
                                    forwardid: device.forwardid,
                                    needalarmstr: device.needalarmstr,
                                    creater: device.creater,
                                    devicetype: device.devicetype,
                                }
                            });
                        }
                        groupsList.push(groupObj);
                    }
                }

                if (groupsList.length == 0) {
                    groupsList.push({
                        name: 'Default(0)',
                        groupid: 0,
                        totalCount: 0,
                        children: [],
                        icon: myUrls.viewhost + "zTreeStyle/img/diy/group.svg"
                    });
                }
                return groupsList;

            },
            doCastUsersTreeToDevicesTree: function(usersTrees, isNeedDevice, isNeedRadio) {
                var devicesTreeRecord = [];
                if (usersTrees != null && usersTrees.length > 0) {
                    for (var i = 0; i < usersTrees.length; ++i) {
                        var usersTree = usersTrees[i];
                        var username = usersTree.username;
                        var subusers = usersTree.subusers;
                        var currentsubDevicesTreeRecord = {
                            name: username,
                            username: username,
                            nocheck: isNeedRadio,
                            icon: myUrls.viewhost + "zTreeStyle/img/diy/account.svg"
                        };
                        var deviceListGroups = this.getDeviceListGroups(usersTree.groups, isNeedDevice, username, isNeedRadio);
                        if (username != null && subusers != null && subusers.length > 0) {
                            var subDevicesTreeRecord = this.doCastUsersTreeToDevicesTree(subusers, isNeedDevice, isNeedRadio);
                            subDevicesTreeRecord = deviceListGroups.concat(subDevicesTreeRecord);
                            currentsubDevicesTreeRecord.children = subDevicesTreeRecord;
                        } else {
                            currentsubDevicesTreeRecord.children = deviceListGroups;

                        }
                        var totalCount = 0;
                        if (currentsubDevicesTreeRecord.children) {
                            for (var j = 0; j < currentsubDevicesTreeRecord.children.length; ++j) {
                                totalCount += currentsubDevicesTreeRecord.children[j].totalCount;
                            }
                        }
                        currentsubDevicesTreeRecord.totalCount = totalCount;
                        currentsubDevicesTreeRecord.name = username + "(" + totalCount + ")";
                        devicesTreeRecord.push(currentsubDevicesTreeRecord);
                    }
                }
                return devicesTreeRecord;
            },
            castUsersTreeToDevicesTree: function(devicesTreeRecord, isNeedDevice, isNeedRadio) {
                var iViewTree = {
                    open: true,
                    nocheck: isNeedRadio,
                    icon: myUrls.viewhost + "zTreeStyle/img/diy/1_open.png"
                };
                if (devicesTreeRecord != null) {
                    var username = devicesTreeRecord.username;
                    var subusers = devicesTreeRecord.subusers;
                    iViewTree.name = username;
                    iViewTree.username = username;
                    var deviceListGroups = this.getDeviceListGroups(devicesTreeRecord.groups, isNeedDevice, username, isNeedRadio);
                    if (username != null && subusers != null && subusers.length > 0) {
                        var subDevicesTreeRecord = this.doCastUsersTreeToDevicesTree(subusers, isNeedDevice, isNeedRadio);
                        iViewTree.children = deviceListGroups.concat(subDevicesTreeRecord);
                    } else {
                        iViewTree.children = deviceListGroups;
                    }
                    var totalCount = 0;
                    if (iViewTree.children) {
                        for (var i = 0; i < iViewTree.children.length; ++i) {
                            totalCount += iViewTree.children[i].totalCount;
                        }
                    }
                    iViewTree.name = username + "(" + totalCount + ")";
                }
                return iViewTree;
            },
            matchingDeviceIds: utils.debounce(function(vm, testIds) {
                var relu = this.getRegularPattern(testIds);
                if (relu.content && relu.errormsg === 'OK') {
                    var guilv = relu.content;
                    var reg = new RegExp("^[a-z0-9a-z]{" + vm.idLength + "}$");
                    if (reg.test(guilv)) {
                        vm.isOk = true;
                        vm.deviceid = guilv + "\n";
                        if (isZh) {
                            vm.errorTips = "总数 : 1";
                        } else {
                            vm.errorTips = "Total : 1";
                        }

                    } else {
                        var isOk = true; // 数据是否合法！
                        var textStr = "";
                        var array = testIds.split(guilv);
                        var errorStr = "";
                        var idx = null;
                        for (var i = 0; i < array.length; i++) {
                            var line = array[i];
                            if (reg.test(line)) {
                                if (array.length - 1 == i) {
                                    textStr += line;
                                } else {
                                    textStr += line + "\n";
                                }
                            } else {
                                idx = i;
                                if (line.length % vm.idLength === 0) {
                                    var count = line.length / vm.idLength;
                                    var j = 0;
                                    while (count > -1 && j <= count) {
                                        textStr += line.slice(j * vm.idLength, vm.idLength * (j + 1)) + "\n";
                                        j++;
                                        count--;
                                    }
                                } else {
                                    errorStr = array[i - 1] + guilv + array[i];
                                    if (array[i + 1]) {
                                        errorStr += guilv + array[i + 1];
                                    }
                                    isOk = false;
                                }
                            }
                        }
                        vm.isOk = isOk;
                        if (isOk) {
                            var newArr = vm.filtered(textStr)
                            var len = newArr.length;
                            vm.deviceid = newArr.join("\n") + "\n";
                            vm.errorTips = "总数  : " + len;
                        } else {
                            vm.errorTips = ("可能在第" + (idx + 1) + "个ID号不合法或者分隔符不一致; \n" + errorStr);
                        }


                    }

                } else {
                    vm.errorTips = "首个ID号不合法";
                    this.isOk = false;
                    $('.my-error-tips textarea').css({
                        color: '#e4393c'
                    });
                }

            }, 500),
            cleanValue: function() {
                this.searchDeviceVal = '';
            },
            calcTableHeight: function() {
                var wHeight = window.innerHeight;
                this.taleHeight = wHeight - 204;
            },
            getDeviceType: function() {
                var me = this;
                var url = myUrls.queryDeviceTypeByUser();
                utils.sendAjax(url, {}, function(resp) {
                    if (resp.status == 0 && resp.devicetypes != null) {
                        resp.devicetypes.forEach(function(item, index) {
                            if (index === 0) {
                                me.deviceType = item.devicetypeid;
                            }

                            me.deviceTypeList.push({
                                value: item.devicetypeid,
                                label: item.typename + "(" + (isZh ? item.remark : item.remarken) + ")"
                            });
                        })

                    }
                });
            },
            getRegularPattern: function(str) {
                var res = {};
                // var reg = /^[a-z0-9a-z]{15}/;
                var reg = new RegExp("^[A-Z0-9a-z]{" + this.idLength + "}");
                if (reg.test(str)) {
                    if (str.length > this.idLength) {
                        var newStr = str.slice(this.idLength);
                        var i = 0;
                        var charArray = [];
                        while (true) {
                            var char = newStr[i];
                            var isTrue = /[A-Z0-9a-z]/.test(char);
                            if (!isTrue) {
                                charArray.push(char);
                            } else {
                                break;
                            }
                            i++;
                        };
                        if (charArray.length > 0) {
                            res.errormsg = "OK";
                            res.content = charArray.join("");
                        } else {
                            res.errormsg = "start id error!";
                            res.content = null;
                        }
                    } else {
                        if (str.length == this.idLength) {
                            res.errormsg = "OK";
                            res.content = str;
                        } else {
                            res.errormsg = "start id error!";
                            res.content = null;
                        }
                    }
                } else {
                    res.content = null;
                    res.errormsg = "start id error!";
                }
                return res;
            },

            variableDeepSearch: function(treeDataFilter, searchWord, limitcount) {

                var childTemp = [];
                var that = this;
                for (var i = 0; i < treeDataFilter.length; i++) {
                    var copyItem = null;
                    var item = treeDataFilter[i];
                    if (item != null) {

                        var isFound = false;
                        if (item.name.toLowerCase().indexOf(searchWord) != -1 || (item.deviceid && item.deviceid.toLowerCase().indexOf(searchWord) != -1)) {
                            copyItem = item;
                            copyItem.open = false;
                            isFound = true;
                        }
                        if (isFound == false && item.children && item.children.length > 0) {
                            // item.expand = true;
                            // childTemp.push(item);
                            var rs = that.variableDeepSearch(item.children, searchWord, limitcount);
                            if (rs && rs.length > 0) {
                                copyItem = deepClone(item);
                                copyItem.children = rs;
                                copyItem.open = true;
                                isFound = true;
                            }
                        }

                        if (isFound == true) {
                            limitcount++;
                            childTemp.push(copyItem);

                            if (limitcount > 1000) {
                                break;
                            }
                        }
                    }
                }

                return childTemp;
            },
            variableDeepGroupSearch: function(treeDataFilter, searchWord, limitcount) {

                var childTemp = [];
                var that = this;
                for (var i = 0; i < treeDataFilter.length; i++) {
                    var copyItem = null;
                    var item = treeDataFilter[i];
                    if (item != null) {

                        var isFound = false;
                        if (item.name.toLowerCase().indexOf(searchWord) != -1) {
                            copyItem = item;
                            copyItem.open = false;
                            isFound = true;
                        }
                        if (isFound == false && item.children) {
                            // item.expand = true;
                            // childTemp.push(item);
                            var rs = that.variableDeepGroupSearch(item.children, searchWord, limitcount);
                            if (rs && rs.length > 0) {
                                copyItem = deepClone(item);
                                copyItem.children = rs;
                                copyItem.open = true;
                                isFound = true;
                            }
                        }

                        if (isFound == true) {
                            limitcount++;
                            childTemp.push(copyItem);

                            if (limitcount > 1000) {
                                break;
                            }
                        }
                    }
                }

                return childTemp;
            },
            setForceAlarmClick: function() {
                if (this.tableData.length == 0) {
                    this.$Message.error(vRoot.$t('reportForm.selectDevTip'));
                    return;
                }
                var me = this;
                var data = {
                    action: 'setneedalarm',
                    deviceids: [],
                    needalarmstr: '',
                };
                for (var i = 0; i < alarmTypeList.length; i++) {
                    data.needalarmstr += this.checkboxObj[i] ? '1' : '0';
                }
                this.tableData.forEach(function(item) {
                    data.deviceids.push(item.deviceid);
                });
                var url = myUrls.batchOperate();
                me.loading = true;
                utils.sendAjax(url, data, function(respData) {
                    me.loading = false;
                    if (respData.status === 0) {
                        if (respData.total == respData.success) {
                            me.$Message.success(vRoot.$t('device.actionSucc'));
                            data.deviceids.forEach(function(deviceid) {
                                utils.deviceInfos[deviceid].needalarmstr = data.needalarmstr;
                                GlobalOrgan.getInstance().editDeviceAlarmStr(utils.deviceInfos[deviceid]);
                            });
                        } else {
                            me.$Message.error(vRoot.$t('message.changeFail') + ' : ' + respData.fail);
                        }
                        me.updatedActionState(respData.errorrecords);
                        me.batchModal = false;
                    } else {
                        me.$Message.error(respData.cause);
                    }
                });
            }
        },
        computed: {
            treeStyle: function() {
                return {
                    'height': (this.taleHeight - 60) + 'px',
                    'overflow-y': 'auto'
                }
            },
            streeStyle: function() {
                return {
                    'height': (this.taleHeight - 35) + 'px',
                    'overflow-y': 'auto'
                }
            },
            deviceids: function() {
                var deviceids = [];
                this.tableData.forEach(function(item) {
                    deviceids.push(item.deviceid);
                });
                return deviceids;
            }
        },
        watch: {
            tableData: function(tableData) {

                if (tableData.length > 0) {
                    var firstDev = tableData[0];
                    var devicetype = utils.deviceInfos[firstDev.deviceid].devicetype;
                    // console.log('firstDev', firstDev);
                    // console.log('devicetype', devicetype);
                    this.devicetype = devicetype;
                    this.querySingleAllCmdDefaultValue(firstDev.deviceid);
                    this.currentDevDirectiveList = utils.getDirectiveList(devicetype);
                    if (this.currentDevDirectiveList.length > 0) {
                        this.handleClickDevType(this.currentDevDirectiveList[0]);
                    }
                    var needalarmstr = firstDev.needalarmstr;
                    if (needalarmstr == null || needalarmstr.length == 0) {
                        for (var key in this.checkboxObj) {
                            this.checkboxObj[key] = true;
                        }
                    } else {
                        try {
                            var me = this;
                            var needalarmstrArr = needalarmstr.split("");
                            needalarmstrArr.forEach(function(item, index) {
                                me.checkboxObj[index] = item == '1' ? true : false;
                            })
                        } catch (error) {
                            console.log(error);
                        }
                    }
                }

            },
            searchValue: function(newVal) {
                if (newVal.length == 0) {
                    this.alarmTypeList.forEach(function(item) {
                        item.show = true;
                    });
                } else {
                    this.alarmTypeList.forEach(function(item) {
                        if (isZh) {
                            if (item.alarmname.indexOf(newVal) != -1) {
                                item.show = true;
                            } else {
                                item.show = false;
                            }
                        } else {
                            if (item.alarmnameen.indexOf(newVal) != -1) {
                                item.show = true;
                            } else {
                                item.show = false;
                            }
                        }

                    });
                }
            },
            isOk: function(isOk) {
                if (isOk) {
                    $('.my-error-tips textarea').css({
                        color: '#2D8CF0'
                    });
                } else {
                    $('.my-error-tips textarea').css({
                        color: '#e4393c'
                    });
                }
            },
            deviceid: function(newVal) {
                var exec = /[0-9A-Za-z]/g.exec(newVal);
                if (exec) {
                    var idx = exec.index;
                    var newText = newVal.slice(idx);
                    this.matchingDeviceIds(this, newText);
                } else {
                    this.isOk = false;
                    this.errorTips = vRoot.$t('message.deviceIdTips');
                }
            },
            searchDeviceVal: function(newVal) {
                newVal = newVal.toLowerCase();
                if (newVal === '') {
                    this.treeDeviceList[0].open = true;
                    this.zTreeObj = $.fn.zTree.init($("#ztree"), this.setting, this.treeDeviceList);
                } else {
                    var limitcount = 0;
                    var data = this.variableDeepSearch(this.treeDeviceList, newVal, limitcount);
                    if (data.length == 0) {
                        data.push({
                            name: isZh ? '无数据' : 'No data',
                            nocheck: true
                        })
                    }
                    this.zTreeObj = $.fn.zTree.init($("#ztree"), this.setting, data);
                }

            },
            searchGroupVal: function(newVal) {
                if (newVal === '') {
                    this.treeGroupList[0].open = true;
                    this.gzTreeObj = $.fn.zTree.init($("#gztree"), this.gsetting, this.treeGroupList);
                } else {
                    var limitcount = 0;
                    var data = this.variableDeepGroupSearch(this.treeGroupList, newVal.toLowerCase(), limitcount);
                    if (data.length == 0) {
                        data.push({
                            name: isZh ? '无数据' : 'No data',
                            nocheck: true
                        })
                    }
                    this.gzTreeObj = $.fn.zTree.init($("#gztree"), this.gsetting, data);
                }
            }
        },
        destroyed: function() {
            this.zTreeObj.destroy();
            this.gzTreeObj.destroy();
        },
        mounted: function() {
            var me = this;
            this.selectedTypeVal = null;
            this.cmdSettings = {};
            this.calcTableHeight();
            this.treeDeviceList = [];
            utils.deviceInfos = {};
            window.onresize = function() {
                me.calcTableHeight();
            }
            this.queryDevicesTree();
            this.getDeviceType();
            this.userName = userName;
            this.alarmTypeList.forEach(function(item, index) {
                me.checkboxObj[index] = false;
                item.show = true;
            })
        },
    })
</script>